<template>
  <div>
    <div class="item">{{ person.name }}</div>
    <div class="item">{{ person.age }}</div>
    <div @click="changeAge">change age</div>
    <Person />
    <Watch />
    <Ref />
    <Props />
    <Life v-if="isShow" />
    <Hooks />

    <div class="flex">
      <div @click="changeRouterQuery('/01News/news')">新闻</div>
      <div @click="changeRouterParams('guanyv')">关于</div>
      <!-- <router-link :to="{ path: "/01News/news" }" active-class="active">新闻</router-link> -->
    </div>
    <div class="body">
      <RouterView></RouterView>
    </div>

    <TotalNum />
    <TalkSome />
    <ToySome />
    <Article />
    <GrandFa />
    <Children />
    <Father />
    <Car />
    <SendToy />
    <Cinema />
    <SaySomething />
    <Dialog />
    <LoveWord />
  </div>
</template>

<script setup lang="ts">
import Person from "@/components/01computed.vue"
import Watch from "@/components/02watch.vue"
import Ref from "@/components/03ref.vue"
import Props from "@/components/05组件传值.vue"
import Life from "@/components/06生命周期.vue"
import Hooks from "@/components/07hooks模块化.vue"


import TotalNum from "@/views/02store实例变量/totalNum.vue"
import TalkSome from "@/views/03$subscribe监听/talkSome.vue"
import ToySome from "@/views/04defineEmits子触发父/toySome.vue"
import Article from "@/views/05v-model与defineModel/article.vue"
import GrandFa from "@/views/06attrs祖传递孙/grandFa.vue"
import Children from "@/views/07ref与defineExpose/children.vue"
import Father from "@/views/08$refs与$parent/father.vue"
import Car from "@/views/09$provide与$inject/grandFa.vue"
import SendToy from "@/views/10mitt全局事件总线/fater.vue"
import Cinema from "@/views/11slot插槽/cinema.vue"
import SaySomething from "@/views/12customRef自定义ref/saySomething.vue"
import Dialog from "@/views/17Teleport传送门/dialog.vue"
import LoveWord from "@/views/18Suspense组件渲染加载中/say.vue"

import { reactive, ref, toRefs } from 'vue';
import { useRouter } from "vue-router"

let router = useRouter()
let person = reactive({
  name: "张三",
  age: 18
})
let isShow = ref(true)

// let person = { name: '张三', age: 18 }  // 无效
let { age } = toRefs(person)

function changeAge() {
  age.value++
  isShow.value = !isShow.value
}
function changeRouterQuery(path: string) {
  router.push({ path: path, query: { title: "超市", content: "今天有人卖鸡蛋" } })
}
function changeRouterParams(name: string) {
  router.push({ name: name, params: { title: "四川惊现歼35" } })
}
</script>


<style lang="scss" scoped>
.flex { display: flex; }
.flex > div+div { margin-left: 20px; }
.body {
  width: 100%;
  height: 80px;
}
</style>
